<template>
  <div class="componentHouse">
    <el-tabs v-model="activeName" type="border-card" class="componentHouse">
      <el-tab-pane name="component" label="元素区域">
        <draggable
          class="dragArea list-group"
          :style="{ 'max-height': areaHeight, 'overflow-y': 'auto' }"
          :list="baseComponent"
          :sort="false"
          :clone="cloneCustom"
          @end="dragEnd"
        >
          <div v-for="item in baseComponent" :key="item.name" class="item">
            <div class="ico">
              <img :src="item.ico" />
            </div>
            <div>{{ item.name }}</div>
          </div>
        </draggable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { post } from '@/servers/http'
import baseComponent from '@/components/house/baseComponent'
import managerTool from '@/util/managerTool'
import draggable from 'vuedraggable'
import dataEnum from '@/servers/dataEnum'
import tool from '@/util/tool'
export default {
  components: {
    draggable
  },
  props: {
    showall: {
      type: Boolean
    }
  },
  data () {
    return {
      activeName: 'component',
      areaHeight: '200px',
      config: {
        name: 'simulatorDemo',
        pull: 'clone',
        put: true,

      }
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent', 'selectedComponent']),
    baseComponent () {
      if (this.showall) {
        return baseComponent
      } else {
        return baseComponent.filter(a => a.v1)
      }
    },
  },
  mounted () {
    let h = document.body.clientHeight
    this.areaHeight = (h - 140) + 'px'
  },
  methods: {
    ...mapMutations('main', ['addComponent','editBizData','editComponent']),
    ...mapMutations('step', ['stepsAdd1']),
    cloneCustom (item) {
      let _this = this
      let hasDevelopedList = dataEnum.componentsEnum.map(a => a.code)
      if (!hasDevelopedList.includes(item.code)) {
        this.$message.warning('该组件正在开发中，还未开放使用！')
        return
      }
      let itemid = managerTool.guid()
      let model = JSON.parse(JSON.stringify(item))
      model._id = itemid
      this.addComponent(model)
      this.addComponentBizData(model)
      setTimeout(() => {
        _this.stepsAdd1(this.pageContent)
      }, 100)

      _this.saveModuleStat(item.code)
    },
    addComponentBizData(){
    },
    addDays(date, days, format = '{y}-{m}-{d}') {
      const dateObj = new Date(date)
      dateObj.setDate(dateObj.getDate() + days)
      return tool.parseTime(dateObj, format)
    },
    saveModuleStat (code) {
      let node = dataEnum.componentsEnum.find(a => a.code === code)
      post('/data/saveModuleStat', {
        moduleType: node.value,
        usageAmount: 1
      })
    },
    dragStart () { },
    dragEnd () { }
  }
}
</script>

<style lang="less" scoped>
.componentHouse {
  margin-top: 10px;
  height: 80vh;
  .dragArea {
    // display: flex;
    // flex-direction: row;
    // flex-wrap: wrap;

    .item {
      cursor: grab;
      // width: 60px;
      width: 250px;
      // height: 60px;
      margin: 15px;
      font-size: 12px;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
      img {
        // width: 75%;
        width: 60px;
      }
    }
  }


    .dragArea::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 3px;
    // background-color: #ccc;
  }

  .dragArea::-webkit-scrollbar-thumb {
    background: #ccc;
  }
  .image {
    width: 100%;
  }
}
</style>

<style lang="less">
.componentHouse {
  border: 0 !important;
  .el-tabs__content {
    // max-height: 400px;
    overflow: auto;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  .el-tabs__header {
    border-bottom: 0 !important;
    .el-tabs__item.is-active {
      background-color: #f5f7fa !important;
      border-color: #f5f7fa !important;
    }
  }
  .el-tabs__item {
    color: #ccc;
  }
  .rule-link {
    position: static !important;
  }
}
</style>
